<template>
  <el-menu
    :default-active="activeIndex"
    class="el-menu-demo"
    mode="horizontal"
    @select="handleSelect"
    text-color="#fff"
    active-text-color="#fff"
    background-color="#545c64"
  >
    <el-menu-item>
      <span class="top-text">XXX主持人团队欢迎您！</span>
    </el-menu-item>
    <el-menu-item>
      <span class="top-text">客服：13812341234</span>
    </el-menu-item>
    <el-menu-item index="2" class="nav-right" v-if="isFage">
      <router-link class="router-text" to="/newPronen">
        <span class="top-text">注册</span>
      </router-link>
    </el-menu-item>
    <el-menu-item index="1" class="nav-right" v-if="isFage">
      <router-link class="router-text" to="/login">
        <span class="top-text">登录</span>
      </router-link>
    </el-menu-item>
    <el-menu-item index="1" class="nav-right" v-if="isFages">
      <span class="top-text" @click="quitLogin">退出登录</span>
    </el-menu-item>
    <el-menu-item index="2" class="nav-right" v-if="isFages">
      <router-link class="router-text" :to="to">
        <span class="top-text">个人中心</span>
      </router-link>
    </el-menu-item>
    <el-menu-item index="3" class="nav-right" v-if="isFages">
      <span class="top-text">欢迎您,{{phone}}</span>
    </el-menu-item>
  </el-menu>
</template>
<script>
import { mapMutations } from "vuex";

export default {
  ...mapMutations("LoginModule", ["clearToken", "clearphone"]),
  name: "HeadNav",
  data() {
    return {
      activeIndex: "1",
      isFage: true,
      phone: "",
      isFages: false,
      to: ""
    };
  },
  mounted() {
    let phone = localStorage.getItem("phone");
    if (phone) {
      this.isFage = false;
      this.isFages = true;
      this.phone = phone.slice(0, 3);
    }
    if (localStorage.getItem("currentIndex")) {
      this.activeIndex = localStorage.getItem("currentIndex");
    }
    let to = localStorage.getItem("new");
    if (to == 1) {
      this.to = "/newpersonal";
    } else if (to == 2) {
      this.to = "/dynamgongsi";
    } else if (to == 3) {
      this.to = "/cehuashi";
    } else if (to == 4) {
      this.to = "/personal";
    }
  },
  methods: {
    handleSelect(key, keyPath) {
      //导航高亮定位
    },
    quitLogin() {
      console.log(this.$store);
      this.$store.commit("LoginModule/clearToken");
      this.$store.commit("LoginModule/clearphone");

      localStorage.clear();
      localStorage.removeItem("phone");
      this.isFage = true;
      this.isFages = false;
      this.$router.replace("/login");
    }
  }
};
</script>
<style scoped>
.el-menu-demo {
  padding: 0 240px;
}
.el-menu--horizontal > .el-menu-item {
  height: 30px;
  line-height: 30px;
}
.el-menu--horizontal > .el-menu-item.is-active {
  padding: 0;
  margin-right: 20px;
  border-bottom: 1px solid #fff;
}
.router-text {
  display: block;
  width: 100%;
  height: 100%;
}
.el-menu--horizontal > .nav-right {
  float: right;
}
</style>